import React from 'react';

import { useAutoHandleTabbar } from '../hooks/useTabbar';
import { useCityList, useHandeleClick } from '../hooks/useCity';

const City = (props) => {
  useAutoHandleTabbar();
  const { list } = useCityList();
  const { handleClick } = useHandeleClick(props);

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li
            key={item.cityId}
            onClick={() => handleClick(item)}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default City;
